﻿var wdWidth = $(window).width();
var wdHeight = $(window).height();
var Center = {
	X: Math.floor(wdWidth/2),
	Y: Math.floor(wdHeight/2)
}
var Unit = {
	X: Math.floor(wdWidth/100),
	Y: Math.floor(wdHeight/100)
}
// set layout

function initialSize(){

	if (wdWidth <= 1100 && wdWidth >= 1000){
		
		$('#Bigest').css({
			'width': 350,
			'height': 220
		});
		
		$('.Medium').css({
			'width': 260,
			'height': 170
		});
	} else if (wdWidth <= 1400 && wdWidth > 1100) {
		$('#Bigest').css({
			'width': 380,
			'height': 240
		});
		
		$('.Medium').css({
			'width': 280,
			'height': 190
		});
	} else if (wdWidth > 1400) {
		$('#Bigest').css({
			'width': 450,
			'height': 290
		});
		
		$('.Medium').css({
			'width': 290,
			'height': 190
		});
	}
}
function initialPos(){
	$('#Bigest').css({
		'top': Center.Y - 110 + 60,
		'left': Center.X - 175
	});
	
	if (wdWidth <= 1100 && wdWidth >= 1000){
		
		$('#Box1').css({
			'top': 190,
			'left': -20
		});
		$('#Box2').css({
			'top': 300,
			'left': 80
		});
		$('#Box3').css({
			'top': 180,
			'left': 900
		});
		$('#Box4').css({
			'top': 250,
			'left': 800
		});
		$('#Box5').css({
			'top': 350,
			'left': 850
		});
		$('#Box6').css({
			'top': 350,
			'left': -120
		});
		
	} else if (wdWidth <= 1550 && wdWidth > 1100) {
		$('#Box1').css({
			'top': 190,
			'left': 20
		});
		$('#Box2').css({
			'top': 300,
			'left': 120
		});
		$('#Box3').css({
			'top': 180,
			'left': 1000
		});
		$('#Box4').css({
			'top': 270,
			'left': 1100
		});
		$('#Box5').css({
			'top': 380,
			'left': 1050
		});
		$('#Box6').css({
			'top': 450,
			'left': 100
		});
		
	} else if (wdWidth > 1550) {
		$('#Box1').css({
			'top': 190,
			'left': 50
		});
		$('#Box2').css({
			'top': 450,
			'left': 120
		});
		$('#Box3').css({
			'top': 180,
			'left': 1090
		});
		$('#Box4').css({
			'top': 550,
			'left': 1150
		});
		$('#Box5').css({
			'top': 350,
			'left': 1200
		});
		$('#Box6').css({
			'top': 350,
			'left': 270
		});
	}
}
$(document).ready( function(){
	initialSize();
	initialPos();
	$('#MiddleContainer').css('height', wdHeight - 405);
	$('.BoxMoving').hover( function(){
		
	});
	var tmpMouseX = 0;
	var tmpMouseY = 0;
	var isFirst = true;
	// $('body').mousemove( function(e){
		// var isRow = Math.abs(tmpMouseX - e.pageX) > Math.abs(tmpMouseY - e.pageY);
		// var isDir = (tmpMouseX - e.pageX) > 0;
		// $('title').text(wdWidth);
		// if(isFirst){
			// isFirst = false;
		// } else{
			// $('.BoxMoving').each( function(){
				// var tmp =  $(this).offset().left;
				// $(this).css('left', tmp + (tmpMouseX - e.pageX)/4);
			// });
		// }
		// tmpMouseX = e.pageX;
		// tmpMouseY = e.pageY;
	// });
	$('#BigLeft').hover( function (){
		$('#HiddenMenu').animate({'top': '-125'}, 600);
	}, function(){
		$('#HiddenMenu').mouseleave( function (){
			$('#HiddenMenu').animate({'top': '-375'}, 300);
		});
	});
	$('.BoxMoving').hover( function(){
		$(this).find('.BoxBottom').animate({'height' : '80px'}, 600);
		$(this).find('.BoxDescript').show();
		$(this).find('a').show();
	}, function(){
		$(this).find('.BoxDescript').hide();
		$(this).find('a').hide();
		$(this).find('.BoxBottom').animate({'height' : '30px'}, 600);
	});
	
	var B1 = {
		x: 0,
		y: 0
	}
	var B2 = {
		x: 0,
		y: 0
	} 	
	$('.BoxMoving').hover(function(){
		$(this).css('z-index', '5');
		var cX = $(this).offset().left;
		var cY = $(this).offset().top;
		B1.x = $('#Box2').offset().left;
		B1.y = $('#Box2').offset().top;
		B2.x = $('#Box6').offset().left;
		B2.y = $('#Box6').offset().top;
		if($(this).attr('id') ==  'Box1'){
			$('#Box2').animate({
				'top': cY + 280,
				'left': cX + 70
			}, 500);
			$('#Box6').animate({
				'top': cY + 80,
				'left': cX + 500
			}, 500);
		}
	}, function(){
		$(this).css('z-index', '3');
		if($(this).attr('id') ==  'Box1'){
			$('#Box2').animate({
				'top': B1.y,
				'left': B1.x
			}, 500);
			$('#Box6').animate({
				'top': B2.y,
				'left': B2.x
			}, 500);
		}
});


// Language
$('#CenterHibrid').removeClass('UK').addClass('VN').attr('title', 'Chuyển sang tiếng việt');
$('.Eng').show();
$('.Vie').hide();
$('#CenterHibrid').click(function () {
    if ($(this).is('.VN')) {
        $(this).removeClass('VN').addClass('UK').attr('title', 'Go to english version');
        $('.Vie').show();
        $('.Eng').hide();
    } else {
        $(this).removeClass('UK').addClass('VN').attr('title', 'Chuyển sang tiếng việt');
        $('.Eng').show();
        $('.Vie').hide();
    }
});
});